<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1322088_b4ghmebaug.css"/>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<link rel="stylesheet" type="text/css" href="js/layui/css/layui.css"/>
	</head>
	<style type="text/css">
		.dutault-nav .col-md-4 .iconfont {
		    position: absolute;
		    color: #999;
		    right: 10px;
		    display: block;
		    background: #f2f2f2;
		    width: 45px;
		    height: 30px;
		    text-align: center;
		    line-height: 30px;
		    border-radius: 0 6px 6px 0;
		    border: 1px solid #e6e6e6;
		}
		
		.dutault-nav .layui-input.secrh{width: 100%;}
		.heard-right{
			display: flex;
			justify-content: flex-end;
		}
		.heard-right button{
			padding: 0;
			margin: 0;
		}
		
		.heard-right button:last-child{
			margin-left: 15px;
		}
	</style>
	<body>
		<div class="container-fluid bg-white">
			<!-- 订单列表 -->
			<div class="order order-box">
				<div class="ood-box">
					<!-- 顶部工具条 -->
					<nav class="flex">
						<!-- 默认显示的操作栏 -->
						<div class="dutault-nav width100 flex">
							<div class="heard-left flex1 flex align-items-center">
								<div class=" padding-0 flex search-box">
									<i class="iconfont icon-search"></i>
									<input type="text" class="layui-input secrh" placeholder="请输入订单号/经销商名称" value="" />
								</div>
								<div><span class="gjss" title="点击进行高级搜索">高级搜索</span></div>
							</div>
							<div class="flex1 heard-right padding-0 flex">
								<button type="button">导入</button>
								<button type="button">导出</button>
							</div>
						</div>
					</nav>
					
					<div class="box03">
						<div>
							<div>8999.00</div>
							<div>现金账户 余额总计</div>
						</div>
						<div>
							<div>4295.00</div>
							<div>预付款账户 余额总计</div>
						</div>
						<div>
							<div>98876.98</div>
							<div>返点账户 余额总计</div>
						</div>
					</div>
					<!-- 数据列表 -->
					<div class="order-list">
						<table id="order-list" lay-filter="test"></table>
					</div>
				</div>
			</div>
			
			<!-- 高级搜索弹出层 -->
			<div class="advanced-search-model hidden">
				<div class="closeSm"></div>
				<div class="sm-box gs-box">
					<form class="layui-form">
						<div class="gs-box-item">
							<div class="title">高级搜索</div>
							<div class="form-box">
								<div class="col-md-6 padding-0">
									<div class="fb-box"><span class="title">经销商名称</span><input type="text" class="form-controls" name="" id="" value="" /></div>
									<div class="fb-box"><span class="title">经销商级别</span><input type="text" class="form-controls" name="" id="" value="" /></div>
									<div class="fb-box"><span class="title">区域</span><input type="text" class="form-controls" name="" id="" value="" /></div>
								</div>
							</div>
						</div>
						
						<div class="footer-buttom">
							<button @click="closegjss" class="closegjss" type="button">取消</button>
							<button type="button">确定</button>
						</div>
					</form>
				</div>
			</div>
			
			
			<!-- 充值弹出层 -->
			<div class="models chongzhi hidden">
				<div @click="hiddenModel('.chongzhi')" class="close"></div>
				<div class="models-box">
					<div class="models-h"><span class="title">充值</span></div>
					<div class="models-b layui-form flex">
						<div class="box-item">
							<div class="b-item flex"><span>经销商名称</span><input disabled="disabled" type="text"></div>
							<div class="b-item flex">
								<span>充值账户</span>
								<select name="city" lay-verify="">
								  <option value="1">现金账户</option>
								  <option value="2">返点账户</option>
								</select>
							</div>
							<div class="b-item flex"><span><i class="iconfont icon-xinghao"></i>金额</span><input type="text"></div>
							<div class="b-item flex">
								<span>充值摘要</span>
								<select name="city" lay-verify="">
								  <option value="1">现金充值</option>
								  <option value="010">销售返点</option>
								  <option value="021">其他充值</option>
								  <option value="0571">拉新提成</option>
								</select>
							</div>
							<div class="b-item flex">
								<span>收款方式</span>
								<input type="radio" name="sex" value="1" title="现金">
								<input type="radio" name="sex" value="2" title="银行转账">
							</div>
							<div class="b-item flex">
								<span>收款账号</span>
								<select name="city" lay-verify="">
								  <option value=""></option>
								  <option value="1">中国建设银行深圳市中旅公馆支行  **8420</option>
								</select>
							</div>
						</div>
						<div class="box-item">
							<div class="b-item flex"><span>充值日期</span><input id="czTime" type="text"></div>
							<div class="b-item flex"><span>备注</span><textarea></textarea></div>
							<div class="b-item flex"><span>附件</span><input type="text"></div>
						</div>
					</div>
					<div class="models-f">
						<button @click="hiddenModel('.chongzhi')" type="button" class="cancel">取消</button>
						<button type="button" class="confirm">确定</button>
					</div>
				</div>
			</div>
			
			<!-- 扣款弹出层 -->
			<div class="models koukua hidden">
				<div class="close"></div>
				<div class="models-box">
					<div class="models-h"></div>
					<div class="models-b"></div>
					<div class="models-f">
						
					</div>
				</div>
			</div>
			
		</div>
		
		<!-- 操作按钮 -->
		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="xiangqing">详情</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="chongzhi">充值</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="koukuan">扣款</a>
		</script>
		
		
		<script src="js/jquery-v3-3.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/new_file.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/Gather.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el:".container-fluid",
				data:{
					
				},
				methods:{
					hiddenModel(dom){
						$(dom).addClass('hidden')
					},
					closegjss(){//隐藏高级搜索
						$(".advanced-search-model").addClass("hidden")
					},
				}
			})
			
			layui.use(['form','table','laydate','element'], function(){
				var table = layui.table,
				laydate = layui.laydate,
				form = layui.form,
				element = layui.element
				
				//充值日期选择
				laydate.render({
					elem: '#czTime',
					type: 'datetime',
					value:Gather.getTime().value,
					format:"yyyy-MM-dd HH:mm:ss",
					done: function(value, date, endDate){
						console.log(value); //得到日期生成的值，如：2017-08-18
						console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
						console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
					}
				});	
				
				
				let hei = document.documentElement.clientHeight;
				
				// 数据列表渲染
				table.render({
					elem: '#order-list'
					,data:DataArray2// data为数据库查到的数据
					,height:(hei-200)
					,cols: [[//以下field字段为为数据库相同,title为字段描述
						{field:'mtype',event: 'barDemo',  title:'	经销商名称'}
						,{field:'sex',  title: '现金账户'}
						,{field:'rank', title: '预付款账户'}
						,{field:'uptime',  title: '返点账户'}
						,{field:'exptime',  title: '总计'}
						,{field:'matt', width:150, title: '操作',toolbar: '#barDemo',}
					]]
					,page: true
				});
				
				table.on('tool(test)', function(obj){
					if(obj.event == "xiangqing"){
						window.top.openViewPage('dd_ddxq.html')
						window.top.setTitles('订单','订单详情')
					}else if(obj.event == 'chongzhi'){
						$(".chongzhi").removeClass('hidden')
					}else if(obj.event == 'koukuan'){
						
					}
					
				})
			});
			
			$(function(){
				var height = document.documentElement.clientHeight;
				$(".container-fluid").css({"height":(height-34)+"px"})
			})
			
			var hei = 0
			$(window).resize(function(){
				hei = document.documentElement.clientHeight;
				$(".container-fluid").css({"height":(hei-67)+"px"})
			})
			
			$(".nav-tab-box .sle-box").click(function(){
				$(this).next().slideToggle(100)
			})
			
			
			//显示高级搜索
			$(".gjss").click(function(){
				$(".advanced-search-model").removeClass("hidden")
			})
		</script>
	</body>
</html>
